<style type="text/css">
	div.underline-btn {
		border-bottom:1px solid #DDD;
		margin:10px 120px;
	}
	input.input-file{
		position:absolute;
		height:34px;
		line-height:34px;
		width:272px;
		left: 97px;
		opacity:0;
		filter:alpha(opacity=0);
		z-index:100;
		cursor:pointer;
	}
	i.icon_file{
		color:rgb(254, 152, 24);
		display:inline-block;
		font-size:22px;
		position:absolute;
		width:22px;
		height:34px;
		line-height:34px;
		left: 300px;
		cursor:pointer;
	}
	span.scan-file{
		color:rgb(254, 152, 24);
		display:inline-block;
		font-size:14px;
		position:absolute;
		width:40px;
		height:34px;
		line-height:34px;
		left:325px;
		cursor:pointer;
	}
	div.scan-con{
		height:34px;
		width:72px;
		line-height:34px;
		vertical-align:middle;
		font-size:14px;
		text-align:left;
		margin-top:-34px;
		margin-left:300px;
	}
	/*1080p适配*/
	@media screen and (min-device-width:1920px){
		.download-firmware {
			font-size: 18px;
		}
		input.input-file {
			height: 46px;
			line-height: 46px;
			width: 328px;
			left: 146px;
		}
		i.icon_file {
			font-size: 28px;
			width: 28px;
			height: 46px;
			line-height: 46px;
			left: 400px;
		}
		span.scan-file {
			font-size: 18px;
			height: 46px;
			line-height: 46px;
			left: 430px;
		}
		div.scan-con {
			height: 46px;
			width: 78px;
			line-height: 46px;
			margin-top: -46px;
			margin-left: 400px;
		}
	}
</style>
<%
	local para = {
		device = {info = {}}
	}

	local result = tpl_get_data(para)
	local data = result[K_MODULE].device.info
-%>
<script type="text/javascript">
(function(){
	$("#CurSwVer").val('<%=data.sw_ver%>');

	var downloadAction  = $.orgURL('/system/backup_download');
	$("#DownloadCfg").attr('action', downloadAction);

	var uploadAction  = $.orgURL('/system/backup_upload');
	$("#uploadConfig").attr('action', uploadAction);

	// 备份配置
	$("#BackupCfg").click(function() {
		if (OS.iPad){
			showAlert(label.sysLimitTip);
			return;
		}
		$("#DownloadCfg").submit();
	});

	// 恢复配置
	function setFileVal(obj, objId) {
		var p = obj.value;
		var lastindex = p.lastIndexOf("\\");
		$("#"+objId).val((p.substring(lastindex+1)));
	}

	$("#ScanFile").change(function(){
		setFileVal(this,"CfgFile");
	});

	$("#RecoverCfg").click(function() {//上传备份
		var str = $("#ScanFile").val();
		var fileForm = str.split(".");

		if (str.length <= 0) {
			showAlert(errStr.cfgFileEmpty);
			return;
		}
		if (fileForm[1] != "dat") {
			showAlert(errStr.cfgFileForm);
			return;
		}

		showLoading(label.cfgUploadingTip);
		$("#RestoreIf").one("load", function(){
			iFrmOnload("RestoreIf", function(data){
				var code = data[ERR_CODE];
				switch(code){
				case E_NONE:
					showProgressBar(label.recoverying, label.rebooting, ROUTER.time.restore, function(){
						window.location.reload();
					});

					$.setTimeout(function(){
						// 检测LAN是否可以连接DUT
						lanDetecting(function(){
							window.location.reload();
						});
					}, ROUTER.time.detectDelay);
					break;
				case E_INCONFILE:
				default:
					showAlert(errStr.cfgFileErr);
					break;
				}
			});
		});

		var formObj = document.restoreConfig;
		formObj.submit();
		formObj.reset();
	});

	// 恢复出厂
	$("#Reset").click(function() {
		showConfirm(label.routerReset, function(choose){
			if (choose){
				showProgressBar(label.reset, label.rebooting, ROUTER.time.reset);

				$.sendAjax('/system/reset', null, function(ret){
					$.setTimeout(function(){
						window.location.href = "http://" + "p.to";
					}, ROUTER.time.reset);

					$.setTimeout(function(){
						// 检测LAN是否可以连接DUT
						lanDetecting(function(){
							window.location.href = "http://" + "p.to";
						});
					}, ROUTER.time.detectDelay);
				});
			}
		});
	});
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/restore.png?_=20170809165512" />
			<span class="help-title">{%label.backupReset%}</span>
		</li>
		<li class="summary">{%helpStr.backupReset%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/restore.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.backupReset%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con">
		<li class="text-con">
			<label class="desc-lbl">{%label.curVer%}</label>
			<input id="CurSwVer" class="text hover" readonly="readonly" value="" />
		</li>
	</ul>
	<iframe name="hideiframe" class="hidden"></iframe>
	<form method="link" name="backup_config" id="DownloadCfg" action="system/backup_download" target="hideiframe">
		<div class="btn-con underline-btn">
			<input id="BackupCfg" class="btn" type="button" value="{%btn.backupCfg%}" />
		</div>
	</form>
	<iframe id="RestoreIf" name="restoreIf" class="hidden"></iframe>
	<form method="post" name="restoreConfig" id="uploadConfig" action="system/backup_upload" enctype="multipart/form-data" target="restoreIf">
		<ul class="set-con">
			<li class="text-con">
				<label class="desc-lbl">{%label.cfgFile%}</label>
				<input id="CfgFile" class="text hover" placeholder="{%label.cfgFileTip%}" value="" />
				<div class="scan-con">
					<input type="file" class="input-file" id="ScanFile" name="file" />
					<i class="icon_file"></i>
					<span class="scan-file">{%label.scan%}</span>
				</div>
			</li>
		</ul>
	</form>
	<div class="btn-con underline-btn">
		<input id="RecoverCfg" class="btn" type="button" value="{%btn.recoverCfg%}" />
	</div>
	<div class="btn-con">
		<input id="Reset" class="btn" type="button" value="{%btn.reset%}" />
	</div>
</div>